<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="../../vendors/iconfonts/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="../../vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="shortcut icon" href="../../images/favicon.png">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>还款管理</title>
    <style type="text/css">
        ::-webkit-scrollbar {width: 6px; /*滚动条的宽度*/height: 10px; /*滚动条的高度*/}
        ::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, 0);}
        ::-webkit-scrollbar-thumb {background-color: rgba(255, 255, 255, 0);transition: background-color .3s;}
        ::-webkit-scrollbar-thumb:hover {width: 5px;background-color: rgba(200, 200, 200, 0.88);-webkit-border-radius: 5px;transition: background-color .3s;}
    </style>
</head>

<body>
<div class="content-wrapper">
    <div class="page-header">
        <h3 class="page-title">
            提前还款
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Forms</a></li>
                <li class="breadcrumb-item active" aria-current="page">Basic elements</li>
            </ol>
        </nav>
    </div>
    <div id="app" class="row">

        <div class="col-lg-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <template>
                        <el-form :inline="true" :model="search" class="demo-form-inline">
                            <el-form-item>
                                <el-input v-model="search.loanId" placeholder="借款编号" style="width:120px"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="search.name" placeholder="姓名" style="width:100px"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="search.contractNo" placeholder="合同号"
                                          style="width:160px"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="search.loanType" placeholder="贷款类型"
                                          style="width:120px"></el-input>
                            </el-form-item>
                            <el-date-picker v-model="search.dateRange" type="daterange" range-separator="-"
                                            style="width:230px"
                                            start-placeholder="开始日期" end-placeholder="结束日期"
                                            :picker-options="pickerOptions">
                            </el-date-picker>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search" @click="onSubmit()">查询</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="info" icon="el-icon-refresh" @click="handleReset()">重置</el-button>
                            </el-form-item>
                        </el-form>
                        <br/>
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column type="selection" width="55" align="center"></el-table-column>
                            <el-table-column prop="loanId" label="借款编号" width="90"
                                             align="center"></el-table-column>
                            <el-table-column prop="userName" label="姓名" width="60"
                                             align="center"></el-table-column>
                            <el-table-column prop="contractId" label="合同号" width="80" align="center">
                            </el-table-column>
                            <el-table-column prop="getLoanDate" label="申请日期" width="110" align="center">
                            </el-table-column>
                            <el-table-column prop="loanAmount" label="申请额度" width="90" align="center">
                            </el-table-column>
                            <el-table-column prop="approvalAmount" label="审批金额" width="80" align="center">
                            </el-table-column>
                            <el-table-column prop="contractAmount" label="合同金额" width="80" align="center">
                            </el-table-column>
                            <el-table-column prop="borrowingPeriod" label="借款期限" width="80" align="center">
                            </el-table-column>
                            <el-table-column prop="loanType" label="贷款类型" width="80" align="center">
                            </el-table-column>
                            <el-table-column prop="repaymentType" label="还款方式" width="90" align="center">
                            </el-table-column>
                            <el-table-column prop="loanDate" label="放款时间" width="100" align="center">
                            </el-table-column>
                            <el-table-column prop="borrowType" label="放款方式" width="90" align="center">
                            </el-table-column>
                            <el-table-column label="状态" width="90" align="center">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.row.repaymentFinish===true" size="mini"
                                               type="warning"
                                               icon="el-icon-loading" circle></el-button>
                                    <el-button v-else type="success" icon="el-icon-check" size="mini"
                                               circle></el-button>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="140" align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="success" plain
                                               @click="handleReRecord(scope.row)">
                                        还款录入
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <br/>
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                       :current-page="currentPage" :page-sizes="[5, 10, 20, 40]"
                                       :page-size="pageSize"
                                       layout="total, sizes, prev, pager, next, jumper" :total="totalSize">
                        </el-pagination>
                    </template>
                    <el-dialog title="办理提前还款" :visible.sync="dialogVisible" width="81%">

                        <el-table :data="repaymentDealInfo" style="width: 100%">
                            <el-table-column prop="repaymentCycle" label="还款期数" width="80"
                                             align="center"></el-table-column>
                            <el-table-column prop="defaultRepaymentDate" label="应还款日" width="100"
                                             align="center"></el-table-column>
                            <el-table-column prop="repaymentDate" label="实际还款日" width="100"
                                             align="center"></el-table-column>
                            <el-table-column prop="principal" label="本金" width="90"
                                             align="center"></el-table-column>
                            <el-table-column prop="interest" label="利息" width="70" align="center"></el-table-column>
                            <el-table-column prop="managementFee" label="管理费" width="70"
                                             align="center"></el-table-column>
                            <el-table-column prop="contractAmount" label="还款总额" width="90"
                                             align="center"></el-table-column>
                            <el-table-column prop="reductionAmount" label="减免金额" width="80"
                                             align="center"></el-table-column>
                            <el-table-column prop="overDays" label="逾期天数" width="80"
                                             align="center"></el-table-column>
                            <el-table-column prop="status" label="状态" width="120" align="center"></el-table-column>
                            <el-table-column prop="commitRole" label="提交人" width="120"
                                             align="center"></el-table-column>
                            <el-table-column prop="commitDate" label="提交时间" width="110"
                                             align="center"></el-table-column>
                            <el-table-column prop="repaymentComment" label="还款备注" width="110" align="center">
                                <template slot-scope="scope">
                                    <el-popover trigger="click" placement="left" v-if="scope.row.status === '申请通过'">
                                        {{scope.row.repaymentComment}}
                                        <el-button slot="reference" size="mini" type="info" round>详情</el-button>
                                    </el-popover>
                                </template>
                            </el-table-column>
                        </el-table>
                        <br/><br/>
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="提前方式">
                                <el-input style="width:190px" :disabled="true" placeholder="全部提前结清"></el-input>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                期数：
                                <el-input style="width:90px" :disabled="true" placeholder="3"></el-input>
                            </el-form-item>
                            <el-form-item label="还款总额">
                                <el-input style="width:110px" :disabled="true" placeholder="0"></el-input>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                管理费：
                                <el-input style="width:90px" :disabled="true" placeholder="300"></el-input>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                实际还款日期：
                                <el-input style="width:150px" :disabled="true" placeholder="2018-9-10">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="备注">
                                <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.theTextarea"
                                          style="width:450px">
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit()">确认提交</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="../../vendors/js/vendor.bundle.base.js"></script>
<script src="../../vendors/js/vendor.bundle.addons.js"></script>
<script src="../../js/off-canvas.js"></script>
<script src="../../js/misc.js"></script>
<script src="../../js/file-upload.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var preM = new Vue({
        el: '#app',
        data: {
            search: {
                loanId: '',
                name: '',
                contractNo: '',
                loanType: '',
                dateRange: ''
            },
            form: {
                name: '',
                region: '',
                delivery: false,
                type: '',
                resource: '',
                desc: '',
                getInterest: true,
                price: '',
                theTextarea: ''
            },
            dialogVisible: false,
            currentPage: 1,
            pageSize: 5,
            totalSize: 0,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            tableData: [],
            repaymentDealInfo: [],
            loanIdContain: ''
        },
        created() {
            this.fetchData()
        },
        methods: {
            fetchData() {
                var cp = String(this.currentPage);
                var ps = String(this.pageSize);
                var q = this.search;
                this.axiosMessage(cp, ps, q)
            },
            handleSizeChange: function (size) {
                preM.$data.currentPage = 1;
                preM.$data.pageSize = size;
                this.fetchData()
            },
            handleCurrentChange: function (currentPage) {
                this.$data.currentPage = currentPage;
                this.fetchData()
            },
            axiosMessage(cp, ps, q) {
                if (q.dateRange === '') {
                    q.dateRange = null
                }
                axios.post(('http://localhost:8004/repayment/list/' + cp + '/' + ps), q).then(function (response) {
                    preM.$data.tableData = response.data.rows;
                    preM.$data.totalSize = response.data.total;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            onSubmit() {
                axios.post('http://localhost:8004/prepayment/commitNormal/' + String(preM.$data.loanIdContain), preM.$data.form).then(function (response) {
                    preM.$data.repaymentDealInfo = response.data.list;
                    if (response.data.res === 1) {
                        preM.$notify({title: '成功', message: '提前还款成功', type: 'success'});
                    } else {
                        preM.$notify.error({title: '错误', message: '提前还款出现异常'});
                    }
                }).catch(function (error) {
                    console.log(error);
                });
                preM.$data.currentPage = 1;
                this.fetchData()
            },
            handleReset() {
                preM.$data.search.loanId = '';
                preM.$data.search.name = '';
                preM.$data.search.contractNo = '';
                preM.$data.search.loanType = '';
                preM.$data.search.dateRange = '';
                this.onSubmit();
            },
            handleReRecord(row) {
                preM.$data.loanIdContain = row.loanId;
                axios.get('http://localhost:8004/repayment/id/' + String(row.loanId)).then(function (response) {
                    preM.$data.repaymentDealInfo = response.data;
                }).catch(function (error) {
                    console.log(error);
                });
                preM.$data.dialogVisible = true
            },
        }
    });
</script>

</html>